<template>
	<view>
		<uni-popup type="bottom" ref="popup">
			<view class="gift">
				<view class="gift-title flex">
					<view class="l-title">礼物</view>
					<view class="l-right flex">
						<button @click="customerGiftLog">赠送</button>
						<button @click="gotoUrl('/pages/my/rechargeBean')">充值</button>
					</view>
				</view>
				<view class="gift-cnt">
					<swiper :interval="3000" :duration="1000">
						<swiper-item v-for="(arr,idx) in giftList" :key="idx">
							<view class="gift-item" :class="{'check':giftId == item.id}" v-for="item in arr" :key="item.id" @click="giftId = item.id;giftImg = item.giftImg;">
								<view class="giftImg">
									<image :src="$common.binImage(item.giftImg)" mode=""></image>
								</view>
								<view class="giftName">{{item.giftName}}</view>
								<view class="giftPrice">{{item.price}}媛豆</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</uni-popup>

		<!-- 显示图片 -->
		<uni-popup type="center" ref="giftPlay">
			<view style="width: 640rpx; height: 640rpx;">
				<image mode="scaleToFill" class="image" :src="$common.binImage(giftImg)"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			technicianId: '',
		},
		data() {
			return {
				giftList: [],
				giftId: "",
				giftImg: "",
			};
		},
		created() {
			this.$http.get('/appNoAuth/config/configGift/list').then(res => {
				let list = []
				let chunk = 8
				let len = res.data.length
				for (let i = 0; i < len; i += chunk) {
					list.push(res.data.slice(i, i + chunk))
				}
				this.giftList = list
			})
		},
		methods: {
			init() {
				this.$refs.popup.open()
			},
			customerGiftLog() {
				if (!this.giftId) {
					uni.showToast({
						icon: 'none',
						title: '请选择赠送的礼物'
					})
					return
				}
				this.$http.post('/app/customer/customerGiftLog', {
					giftId: this.giftId,
					technicianId: this.technicianId,
					num: 1,
				}).then(res => {
					this.$refs.popup.close()

					// 播放
					this.$refs.giftPlay.open()
					setTimeout(() => {
						this.$refs.giftPlay.close()
					}, 3000)
				})
			},
			gotoUrl(url, item) {
				this.$refs.popup.close()
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gift { width: 100%; height: 500rpx; background-color: #fff; border-radius: 20rpx 20rpx 0 0; .gift-title { width: 100%; height: 100rpx; .l-title { flex: 1; height: 100rpx; line-height: 100rpx; color: #000; font-size: 30rpx; padding-left: 24rpx; }
			.l-right { justify-content: flex-end; width: 280rpx; margin-right: 24rpx; button { width: 120rpx; height: 60rpx; border-radius: 30rpx; line-height: 60rpx; font-size: 28rpx; margin-left: 20rpx; &::after { border: none; }
					&:first-child { border: 2rpx solid #d7b075; background: #d7b075; color: #fff; }
					&:last-child { background: #fff; color: #d7b075; border: 2rpx solid #d7b075; }
				}
			}
		}
		.gift-cnt { width: 100%; height: 400rpx; padding: 50rpx 0 20rpx; box-sizing: border-box; swiper,swiper-item, { width: 100%; height: 100%; }
			swiper-item { display: flex; padding: 0 20rpx; }
			.gift-item { width: 21%; height: 140rpx; margin-bottom: 20rpx; margin: 0 2%; box-sizing: border-box; padding: 10rpx; .giftImg { width: 100%; height: 140rpx; display: flex; align-items: center; justify-content: center; image { width: 140rpx; height: 140rpx; background: none; }
				}
				.giftName { color: #333; height: 20rpx; line-height: 20rpx; font-size: 20rpx; text-align: center; margin-bottom: 10rpx; }
				.giftPrice { color: #999; font-size: 16rpx; height: 20rpx; line-height: 20rpx; text-align: center; }
			}
			.check { background: #faf0fb; box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, .2); border: 2rpx solid #d7b075; border-radius: 10rpx; }
		}
	}
</style>
